<template>
    <div class="app-container">
        <el-form>
            <el-row :gutter="20">
                <!-- 医院基础信息 -->
                <el-col :span="12">
                    <div class="con">
                        <p>医院基础信息</p>
                        <div>
                            <el-form-item label="医院名称" v-if="!hasPermission('adminRole')">
                                <span class="spanToInput">{{hospitalInfoList.name}}</span>
                            </el-form-item>
                            <el-form-item label="医院名称" v-else>
                                <span class="spanToInput">暂无</span>
                            </el-form-item>
                            <el-form-item label="医院状态" v-if="!hasPermission('adminRole')">
                                <span class="spanToInput">{{hospitalInfoList.status | statusType}}</span>
                            </el-form-item>
                            <el-form-item label="医院状态" v-else>
                                <span class="spanToInput">暂无</span>
                            </el-form-item>
                        </div>
                    </div>
                </el-col>
                <!-- 回款信息 -->
                <el-col :span="12">
                    <div class="con">
                        <p>回款信息</p>
                        <div>
                            <el-form-item label="待回款总金额" v-if="!hasPermission('adminRole')">
                                <span class="spanToInput">{{todoRepayedAmount}}元</span>
                            </el-form-item>
                            <el-form-item label="待回款总金额" v-else>
                                <span class="spanToInput">暂无</span>
                            </el-form-item>
                        </div>
                    </div>
                </el-col>
                <!-- 医院业绩 -->
                <el-col :span="12">
                    <div
                        class="con conMb"
                        v-loading="tableLoading"
                        v-if="!hasPermission('adminRole')"
                    >
                        <p>医院业绩</p>
                        <el-table class="conTable" :data="tableData" border style="width:400px">
                            <el-table-column prop="month" label="月份"></el-table-column>
                            <el-table-column prop="achivement" label="业绩"></el-table-column>
                        </el-table>
                    </div>
                    <div class="con conMb" v-else>
                        <p>医院业绩</p>
                        <el-table class="conTable" :data="tableData" border style="width:400px">
                            <el-table-column prop="month" label="月份"></el-table-column>
                            <el-table-column prop="achivement" label="业绩"></el-table-column>
                        </el-table>
                    </div>
                </el-col>
                <!-- 逾期信息 -->
                <el-col :span="12">
                    <div class="con conMb">
                        <p>逾期信息</p>
                        <div v-if="overdueRepaymentCount">
                            <p
                                class="overdueTitle"
                            >已有{{overdueRepaymentCount}}条流水单逾期未回款，逾期将影响您在美美咖的预约</p>
                            <el-button @click="toRoutes('hospitalPayIndex')" type="primary">立即回款</el-button>
                        </div>
                        <div v-else>
                            <p class="overdueTitle">暂无流水单逾期</p>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import commonFn from "@/utils/common";
import homePage from "@/api/homePage";
import {policy} from '@/api/policy'
export default {
    name: "homePage",
    data() {
        return {
            // loading层
            tableLoading: true,
            tableData: [],
            form: {
                pageNum: 1,
                pageSize: 10
            },
            hospitalInfoList: {},
            overdueRepaymentCount: null,
            todoRepayedAmount: null,
            id: ""
        };
    },
    filters: {
        // 状态过滤
        statusType(e) {
            switch (e) {
                case 0:
                    return "上架";
                case 1:
                    return "下架";
                default:
                    return "暂无";
            }
        }
    },
    mounted() {
        this.getList();
        this.getPolicy()
        // 获取hospitalId
        // console.log(this.$store.state.user.hospitalId)
        // 获取userId
        // console.log(this.$store.state.user.userId)
    },
    methods: {
        //获取签名
        getPolicy(){
            policy().then(res=>{
                // console.log(res)
                this.aliyunOssToken = res.data.data
                this.imgUrl = res.data.data.host
                var imgUrlPrefix = this.aliyunOssToken.host + "/"
                sessionStorage.setItem("imgUrlPrefix",imgUrlPrefix)
            })
        },
        // 按钮权限
        hasPermission(e) {
            return window.helper.hasPermission(e);
        },
        // 路由跳转
        toRoutes(e, userId) {
            let route = { name: e, query: { userId: userId } };
            this.$router.push(route);
        },
        getList(e) {
            homePage
                .getList(e)
                .then(res => {
                    if (!res.data.code) {
                        let resData = res.data.data;
                        this.tableData = resData.hospitalAchivementList;
                        this.hospitalInfoList = resData.hospitalInfo;
                        this.overdueRepaymentCount =
                            resData.overdueRepaymentCount;
                        this.todoRepayedAmount = resData.todoRepayedAmount;
                        this.tableLoading = false;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.tableLoading = false;
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.tableLoading = false;
                });
        }
    }
};
</script>
<style>
/* 四个模块样式 */
.con {
    border-radius: 4px;
    border: 1px solid #cacaca;
    height: calc(100vh - 594px);
    min-height: 300px;
    margin-bottom: 20px;
}
.con > p {
    height: 40px;
    line-height: 40px;
    text-indent: 20px;
    border-bottom: 1px solid #cacaca;
}
.con > div {
    margin-left: 20px;
    margin-top: 20px;
}
.con > div > div {
    margin-bottom: 0px;
}
.conMb {
    margin-bottom: 0;
}
.conTable {
    margin: 0 auto !important;
    margin-top: 20px !important;
}
.overdueTitle {
    font-size: 14px;
    color: #606266;
    margin-bottom: 20px;
}
</style>